﻿@{
    ViewBag.Title = "Home Page";
    Layout = null;
    @Styles.Render("~/layui/css")
}

<div class="layui-btn-container">
    <p>@DateTime.Now</p>
    <button class="layui-layer-btn" onclick="LoadFile()">刷新表格</button>
    <div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
        <i class="layui-icon layui-icon-upload"></i>
        <div>点击上传，或将文件拖拽到此处</div>
        <div class="layui-hide" id="ID-upload-demo-preview">
            <hr> <img src="" alt="上传成功后渲染" style="max-width: 100%">
        </div>
    </div>

    <table class="layui-hide" id="ID-table-demo-data" lay-filter="ID-table-demo-data"></table>
  
</div>

<script type="text/html" id="toolDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">预览</a>
    </div>
</script>
@Scripts.Render("~/bundles/layui")
<script>

    
layui.use(function(){
  var upload = layui.upload;
    var layer = layui.layer;
    var table = layui.table;
    var $ = layui.jquery;
      LoadFile();
    //表格
    table.on('tool(ID-table-demo-data)', function (obj) {
        var id = obj.config.id;
        console.log(obj);
        var checkStatus = table.checkStatus(id);
        var othis = lay(this);
        switch (obj.event) {
            case 'edit':
            var data = obj.data;
                console.log(data)
                console.log();
                console.log(encodeURIComponent(data.FileName));
                window.open('@Url.Action("Preview")?fileName=' + window.btoa(window.encodeURIComponent(data.FileName)));
             
                @*$.ajax({
                  url: '@Url.Action("Preview")',
                  type: 'get',
                  data:data,
                  success: function (res) {
                      var inst = table.render({
                          elem: '#ID-table-demo-data',
                          cols: [[ //标题栏
                              { field: 'Id', title: 'ID', sort: true },
                              { field: 'FileName', title: '名称', width: 280 },
                              { field: 'FileSuffix', title: '后缀', width: 20 },
                              { field: 'ContentType', title: '内容类型', },
                              { field: 'FilePath', title: '地址', },
                              { field: 'FileSize', title: '大小', },
                              { fixed: 'right', title: '操作', width: 134, minWidth: 125, templet: '#toolDemo' }
                          ]],
                          data: res ,
                          //skin: 'line', // 表格风格
                          //even: true,
                          page: true, // 是否显示分页
                          limits: [5, 10, 15],
                          limit: 5 // 每页默认显示的数量
                      });
                  }*@
                //});
                //layer.alert(layui.util.escape(JSON.stringify(data)));
                //break
                LoadFile();
        };
    });


    // 渲染


    upload.render({
        elem: '#ID-upload-demo-drag',
        url: '@Url.Action("UploadFile")', // 实际使用时改成您自己的上传接口即可。
        accept: 'file', // 普
        done: function (res) {
            layer.msg('上传成功');
            //$('#ID-upload-demo-preview').removeClass('layui-hide')
            //    .find('img').attr('src', res.files.file);
            console.log(res)
            LoadFile();
        }
    });


    function LoadFile() {
        $.ajax({
            url: '@Url.Action("SelectAllFile")',
            type: 'get',
            success: function (res) {
                var inst = table.render({
                    elem: '#ID-table-demo-data',
                    cols: [[ //标题栏
                        { field: 'Id', title: 'ID', sort: true },
                        { field: 'FileName', title: '名称', width: 280 },
                        { field: 'FileSuffix', title: '后缀', width: 20 },
                        { field: 'ContentType', title: '内容类型', },
                        { field: 'FilePath', title: '地址', },
                        { field: 'FileSize', title: '大小', },
                        { fixed: 'right', title: '操作', width: 134, minWidth: 125, templet: '#toolDemo' }
                    ]],
                    data: res ,
                    //skin: 'line', // 表格风格
                    //even: true,
                    page: true, // 是否显示分页
                    limits: [50, 100, 150],
                    limit: 100 // 每页默认显示的数量
                });
            }
        });
    }


});
</script>

